<%# locals: (totals:) %>
<div class="grid grid-cols-1 md:grid-cols-3 bg-container rounded-xl shadow-border-xs md:divide-x divide-y md:divide-y-0 divide-alpha-black-100 theme-dark:divide-alpha-white-200">
  <div class="p-4 space-y-2">
    <p class="text-sm text-secondary">Total transactions</p>
    <p class="text-primary font-medium text-xl" id="total-transactions"><%= totals.count.round(0) %></p>
  </div>
  <div class="p-4 space-y-2">
    <p class="text-sm text-secondary">Income</p>
    <p class="text-primary font-medium text-xl" id="total-income">
      <%= totals.income_money.format %>
    </p>
  </div>
  <div class="p-4 space-y-2">
    <p class="text-sm text-secondary">Expenses</p>
    <p class="text-primary font-medium text-xl" id="total-expense">
      <%= totals.expense_money.format %>
    </p>
  </div>
</div>
